<extend name="Public/layout" />
<block name="body">
    <link rel="stylesheet" href="/Public/Wap/css/e.css">
    <link rel="stylesheet" href="/Public/Wap/css/plist.css">
    <script src="/Public/Wap/js/vue.js"></script>
    <script src="/Public/Wap/js/e.js"></script>
    <div id="list" class="panel panel-default panel-intro">
        <div class="panel-heading">
            <ul class="nav nav-tabs" data-field="warping">
                <!-- <li class="active"><a>全部</a></li> -->
                <li :class="active===i?'active':''" @click="bindNav(i)" v-for="(item, i) in nav"><a>{{item.name}}</a>
                </li>
            </ul>
        </div>
        <div class="panel-body">
            <div id="myTabContent" class="tab-content">
                <div class="tab-pane fade active in" id="one">
                    <div class="widget-body no-padding">
                        <div class="bootstrap-table">
                            <div class="commonsearch-table ">
                                <!-- form-group col-xs-12 col-sm-6 col-md-4 col-lg-3 -->
                                <el-form :model="ruleForms" ref="ruleForms" label-width="100px" class="demo-ruleForm"
                                    size="small">
                                    <el-row class="item-top top">
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="活动ID">
                                                <el-input v-model="ruleForms.activityId"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="被挖单">
                                                <el-select v-model="ruleForms.type" clearable placeholder="请选择"
                                                    style="width:100%">
                                                    <el-option
                                                        v-for="(item, idx) in '全部|待挖单处理|昨日过期|今日过期|明日过期'.split('|')"
                                                        :key="idx" :label="item" :value="idx">
                                                    </el-option>
                                                </el-select>
                                                <!-- <el-input v-model="ruleForms.type"></el-input> -->
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="商品信息">
                                                <el-input v-model="ruleForms.title"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="店铺ID">
                                                <el-input v-model="ruleForms.shopId"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="商品id">
                                                <el-input v-model="ruleForms.skuId"></el-input>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="开始日期">
                                                <el-date-picker type="date" placeholder="开始日期"
                                                    v-model="ruleForms.s_time" style="width: 100%;">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="结束日期">
                                                <el-date-picker type="date" placeholder="结束日期"
                                                    v-model="ruleForms.e_time" style="width: 100%;">
                                                </el-date-picker>
                                            </el-form-item>
                                        </el-col>
                                        <el-col :xs="24" :sm="12" :md="8" :lg="6">
                                            <el-form-item label="所有者">
                                                <el-select v-model="ruleForms.mid" clearable placeholder="请选择"
                                                    style="width:100%">
                                                    <el-option v-for="item in userList" :key="item.uid"
                                                        :label="item.nickname" :value="item.uid">
                                                    </el-option>
                                                </el-select>
                                                <!-- <el-input v-model="ruleForms.skuId"></el-input> -->
                                            </el-form-item>
                                        </el-col>
                                        <!-- <el-col' :span="1">1</el-col> -->
                                        <el-col :offset='1' :sm="12" :md="8" :lg="6">
                                            <el-button type="primary" size="small" @click="on_Submit">查询</el-button>
                                            <el-button type="primary" size="small" @click="onclear('ruleForms')">清空
                                            </el-button>
                                        </el-col>
                                    </el-row>
                                </el-form>
                            </div>
                            <!-- <div class="fixed-table-toolbar">
                                <div class="bs-bars pull-left">
                                    <div id="toolbar" class="toolbar">
                                        <a href="javascript:;" class="btn btn-primary btn-refresh" title="刷新"><i
                                                class="fa fa-refresh"></i> </a> <a href="javascript:;"
                                            class="btn btn-primary btn-wait">挖单待处理（<span id="wait">34</span>）</a>
                                        <a href="javascript:;" class="btn btn-primary btn-yesterdayexpire">昨天过期（<span
                                                id="yesterdayexpire">106</span>）</a>
                                        <a href="javascript:;" class="btn btn-primary btn-todayexpire">今日过期（<span
                                                id="todayexpire">18</span>）</a>
                                        <a href="javascript:;" class="btn btn-primary btn-tomorrowexpire">明日过期（<span
                                                id="tomorrowexpire">129</span>）</a>
                                    </div>
                                </div>
                            </div> -->
                            <div class="fixed-table-container" style="margin-top: 20px;">
                                <div class="fixed-table-body">
                                    <div class="list">
                                        <el-row class="item-top top">
                                            <el-col :span="7"> 商品信息 </el-col>
                                            <el-col :span="4"> 排期时间 </el-col>
                                            <el-col :span="3"> 佣金比例 </el-col>
                                            <el-col :span="2"> 服务费率 </el-col>
                                            <el-col :span="4"> 优惠券 </el-col>
                                            <el-col :span="3"> 所有者 </el-col>
                                            <!-- <el-col :span="3">
                        操作
                    </el-col> -->
                                        </el-row>
                                        <el-row class="item" v-for="(item, index) in list">
                                            <el-col :span="7">
                                                <div class="flex-start">
                                                    <a :href="item.goods_url" target="_blank" style="display: block;">
                                                        <img style="width: 80px;border-radius:5px" :src="item.imgUrl"
                                                            alt="">
                                                    </a>
                                                    <div class="shop-info">
                                                        <div class="ui-nowrap-2" style="white-space: normal"
                                                            :title="item.skuName"> {{item.skuName}} </div>
                                                        <!--<p>{{item.skuName}}</p>-->
                                                        <p class="name">价格：￥{{item.price}}</p>
                                                        <!-- <p class="website">销量：888</p> -->
                                                        <p class="shop-name">{{item.shopName}} <img src="/Public/img/wangwang.png"
                                                                alt=""></p>
                                                    </div>
                                                </div>
                                            </el-col>
                                            <el-col :span="4">
                                                <div class="activity">
                                                    <p>活动：{{item.activityId}}</p>
                                                    <p>起：{{item.startTime}}</p>
                                                    <p>止：{{item.endTime}}</p>
                                                </div>
                                            </el-col>
                                            <el-col :span="3">
                                                <div class="ratio">
                                                    <p>{{item.commisionRatioWl}}%</p>
                                                </div>
                                            </el-col>
                                            <el-col :span="2"> {{item.serviceRate}} </el-col>
                                            <el-col :span="4">
                                                <div class="discounts">
                                                    <p>满送</p>
                                                    <p>100/1000</p>
                                                    <p>2020-09-09到2020/10-09</p>
                                                </div>
                                            </el-col>
                                            <el-col :span="3">
                                                <div class="code-id">
                                                    <!-- <p>账号：{{item.mid}}</p> -->
                                                    <p>{{item.m_nickname}}</p>
                                                </div>
                                            </el-col>
                                            <!-- <el-col :span="3">
                        <p class="ckeckitem" @click='dialogVisible_hb_btn(item.id)'>分配</p>
                    </el-col> -->
                                        </el-row>
                                    </div>
                                    <div class="pages">
                                        <p class="text fl">每页显示10条，共{{page_count}}条</p>
                                        <div class="fr">
                                            <el-pagination background :current-page.sync="currentPage3"
                                                @current-change='check' layout="prev, pager, next" :total=page_count>
                                            </el-pagination>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="clearfix"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <script>
        const http = 'http://jd.yx.com'
        new Vue({
            el: '#list',
            data() {
                return {
                    pagesize: 10,
                    currentPage3: 1,
                    page_count: 0,
                    dialogVisible_hb: false,
                    list: [],
                    region: '',
                    ruleForms: {
                        skuId: '',
                        shopId: '',
                        activityId: '',
                        s_time: '',
                        e_time: '',
                        title: '',
                        mid: ''
                    },
                    nav: [{
                        name: '全部'
                    }, {
                        name: '挖单待处理'
                    },
                    {
                        name: '昨日过期'
                    },
                    {
                        name: '今日过期'
                    },
                    {
                        name: '明日过期'
                    }
                    ],
                    active: 0,
                    rules: {},
                    region_list: [],
                    userList: [],
                }
            },
            created() {
                this.$nextTick(() => {
                    var idArray = window.location.search.split("=");
                    if (idArray.length == 2) {
                        this.ruleForms.activityId = idArray[1]
                    } else if (idArray.length == 3) {
                        this.active = parseInt(idArray[2])
                    }
                    this.lists(1)
                })
            },
            mounted() {
                this.getUserList();
                // this.binderList()

            },
            methods: {
                getUserList() {
                    let that = this;
                    $.post(`/kcadmin/Jd/binderList`, {}, res => {
                        that.userList = res.data;
                    })
                },
                // 换绑
                dialogVisible_hb_btn(e) {
                    console.log(e)
                    this.dialogVisible_hb = true
                    this.is_mid = e
                },

                on_Submit() {
                    console.log('submit!', this.ruleForms);
                    // this.ruleForms
                    this.lists(1)
                },
                check(i) {
                    console.log('222', i)
                    this.lists(i)
                },
                lists(page) {
                    let data = {
                        page_num: page,
                        page_size: 10,
                        type: this.active,
                        status: '' //状态
                    }

                    let postData = Object.assign(data, this.ruleForms)

                    $.post(`/kcadmin/Jd/goodsList`, postData, res => {
                        this.list = res.data
                        this.page_count = parseInt(res.page_count)
                        console.log(res.data, this.list, 666)
                    })
                },
                onclear(formName) {
                    console.log(formName)
                    this.$refs[formName].resetFields();
                },
                bindNav(i) {
                    console.log(22232)
                    console.log(i)
                    this.active = i
                    this.currentPage3 = 1
                    this.lists(1)

                }
            }
        })
    </script>
    <link rel="stylesheet" href="./css.css">
    <style>
        .content-wrapper .content-top {
            display: none;
        }

        .el-form-item {
            margin-bottom: 10px;
        }

        .btnf {
            height: 36px;
        }

        .fl {
            float: left;
        }

        .fr {
            float: right;
        }

        li {
            list-style: none;
        }

        .title {
            line-height: 98px;
            font-weight: 800;
            font-size: 16px;
            margin: 0 40px;
            position: relative;
        }

        .lg-title {
            width: 100%;
            height: 65px;
            line-height: 65px;
            position: absolute;
            top: 0;
            left: 0;
            background: #4A90E2;
            text-indent: 25px;
            color: #fff;
            font-size: 18px;
        }

        .title a {
            color: #333;
        }

        .title span {
            margin-right: 50px;
        }

        .title .active {
            position: relative;
            color: #3B8DBC;
        }

        .title .active::after {
            content: '';
            width: 38px;
            height: 4px;
            border-radius: 2px;
            background: #3B8DBC;
            position: absolute;
            top: 28px;
            left: calc(50% - 19px);
        }

        .list {
            /* min-width: 1050px; */
            /* max-height: 70vh; */
            /* margin: 0 40px; */
            /* overflow-y: auto; */
        }

        .list .item {
            /* height: 144px; */
            font-size: 12px;
            padding: 10px;
            display: flex;
            justify-content: flex-start;
        }

        .list .item .logo {
            width: 88px;
            height: 88px;
            margin: 0 21px 0 12px;
        }

        .shop-info {
            margin: 0 10px;
        }

        .shop-info .name {
            margin: 10px 0;
        }

        .shop-name img {
            width: 20px;
            height: 20px;
            margin: 3px 0 0 6px;
        }

        .list .top {
            font-size: 14px;
            font-weight: 800;
            padding: 10px;
        }

        .list .item:nth-child(even) {
            background: #F9F9F9;
        }

        .btn li {
            width: 46%;
            height: 25px;
            line-height: 25px;
            margin: 0 4% 3px 0;
            color: #fff;
            background: #4A90E2;
            text-align: center;
            float: left;
            font-size: 12px;
        }

        .btn .remove {
            background: #FF7400;
        }

        .flex-start {
            display: flex;
            justify-content: flex-start;
        }

        .list p,
        .activity p,
        .code-id p,
        .discounts p {
            margin-bottom: 10px;
        }

        .pages {
            width: 95%;
            margin: 0px auto 20px;
        }

        /* 文字截断 */
        .ui-nowrap,
        .ui-nowrap-flex,
        .ui-nowrap-2,
        .ui-nowrap-3 {
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .ui-nowrap {
            max-width: 100%;
            white-space: nowrap;
        }

        .ui-nowrap-flex,
        .ui-nowrap-2,
        .ui-nowrap-3 {
            display: -webkit-box;
            /*! autoprefixer: off */
            -webkit-box-orient: vertical;
            /*! autoprefixer: on */
        }

        .ui-nowrap-flex {
            -webkit-line-clamp: 1;
            -webkit-box-flex: 1;
            height: inherit;
        }

        /*要截断的行数*/
        .ui-nowrap-2 {
            -webkit-line-clamp: 2;
        }
    </style>
</block>